import { Meta } from '@storybook/blocks';

import * as AnimatedAlignStories from '../stories/AnimatedAlign.stories';

<Meta of={AnimatedAlignStories} />

# AnimatedAlign

Animated version of Align which automatically transitions the child's position over a given duration whenever the given alignment changes.

## Example

```dart liveslice=AnimatedAlign
AlignmentGeometry _alignment = Alignment.topRight;

void _changeAlignment() {
  setState(() {
    _alignment = _alignment == Alignment.topRight ? Alignment.bottomLeft : Alignment.topRight;
  });
}

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        height: 120.0,
        width: 120.0,
        color: Colors.blue[50],
        child: AnimatedAlign(
          alignment: _alignment,
          curve: Curves.ease,
          duration: Duration(seconds: 3),
          child: FlutterLogo(
            size: 60,
          ),
        ),
      ),
      FlatButton(
        onPressed: () {
          _changeAlignment();
        },
        child: Text(
          "Click Me!",
        ),
      )
    ],
  );
}
```

## Related Links

- https://api.flutter.dev/flutter/widgets/AnimatedAlign-class.html
